<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p11_定位广告</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            /* 使用固定定位 */
            position: fixed;
            /* 宽度为视口宽度的100% */
            width: 100vw;
            /* 距离视口html顶部的距离为0 */
            top:0;

        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top:300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;


        }
        .right{
            background-color: #f35336;
            right:20px;
        }
        .main{
            margin-top: 130px;
        }

    </style>
</head>
<body>
    <div class="top">顶部广告条</div>
    <div class="left">左侧广告条</div>
    <div class="right">右侧广告条</div>
    <div class="main">内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto aspernatur aut consequatur,
            dignissimos esse fuga harum iste labore laboriosam minus mollitia nulla placeat praesentium quae quo rerum
            sit totam.
        </div>
        <div>Aperiam delectus doloremque enim est fuga ipsum maxime possimus provident, rem voluptatum! Aut culpa
            dignissimos, doloremque est eveniet fugit harum nemo quibusdam quod, tenetur vero voluptatum? Accusamus
            accusantium ipsam voluptates.
        </div>
        <div>Assumenda consectetur cumque dolorum illo, inventore, ipsum nihil, qui reprehenderit ullam unde vel veniam!
            Consequatur dicta dolorem, eum fugiat ipsam laudantium magnam modi officia optio, praesentium reiciendis
            rem, sapiente similique.
        </div>
        <div>A accusamus accusantium, alias aliquam animi cum distinctio dolorum earum eos, esse eveniet explicabo hic
            ipsum, itaque laboriosam nesciunt nihil odio optio perspiciatis placeat provident quam quibusdam similique
            tenetur voluptate.
        </div>
        <div>Aliquid corporis cumque ducimus eos esse exercitationem, fuga, harum odit quae reprehenderit sint suscipit
            vel voluptates? Asperiores beatae dolorem ducimus, eveniet iure laboriosam, magnam maiores natus nesciunt
            perspiciatis repudiandae, veniam.
        </div>
        <div>Esse libero ratione vero. Ab asperiores aspernatur blanditiis consectetur debitis deserunt dicta doloribus
            error, et excepturi in ipsam iusto pariatur perspiciatis placeat quae quos reiciendis sed similique, sunt
            vel veritatis.
        </div>
        <div>A accusamus aliquid aspernatur consequuntur cumque deserunt distinctio dolores ducimus esse explicabo,
            harum libero molestias nobis officia omnis provident, quasi ratione repellendus soluta temporibus veniam
            voluptatibus voluptatum. Ab animi, deserunt?
        </div>
        <div>A adipisci animi aut cum debitis deserunt eaque eum fugit illum in magnam minima minus neque nobis omnis
            optio, possimus quam repellat reprehenderit sapiente sint suscipit veniam vero voluptas voluptatem?
        </div>
        <div>Adipisci aliquam consectetur dolor dolores excepturi, illo iure laboriosam laborum libero, molestias optio
            placeat possimus quaerat quam qui quisquam ratione repudiandae sapiente vero, voluptas. A aperiam at
            expedita libero rem!
        </div>
        <div>Aliquam amet atque beatae commodi cumque dolor dolorem ducimus eius eos fuga incidunt magnam, minima
            officia officiis quae quaerat, quos sequi sit suscipit tempore. Nesciunt, nobis, suscipit? Expedita, quas
            vel?
        </div>
        <div>Aperiam eum libero, magnam maxime natus nulla reiciendis. Adipisci, aperiam, aut cupiditate deleniti
            dignissimos dolorem eius eveniet fuga fugiat in ipsum maxime modi necessitatibus obcaecati pariatur quae
            reprehenderit rerum, similique.
        </div>
        <div>Deleniti dicta esse illum in molestiae quam recusandae reiciendis repellendus vel. Illo, magnam maxime?
            Aperiam consectetur cupiditate doloremque exercitationem explicabo hic natus reprehenderit? A, minus quaerat
            quam sed velit veritatis?
        </div>
        <div>Accusantium aliquid amet at aut beatae cumque eos expedita facilis fuga harum illo ipsum nesciunt nisi odit
            praesentium quasi, voluptate. Aliquid consequatur excepturi id ipsum porro praesentium sapiente tempore vel!
        </div>
        <div>Accusantium architecto at aut corporis cupiditate dolor dolores doloribus eaque esse et exercitationem
            facilis fuga in inventore magnam necessitatibus obcaecati perspiciatis provident, quidem rerum sapiente
            soluta veritatis vitae. Magnam, quos!
        </div>
        <div>Asperiores deserunt error impedit, iste minima nam natus placeat! Earum ex explicabo ipsa magnam minus
            tempora? Alias at, eaque expedita iusto, maiores maxime molestiae odit quod sint sunt velit voluptate.
        </div>
        <div>Accusantium aliquam at atque commodi culpa, debitis deserunt dolorem doloremque earum excepturi inventore
            ipsa iusto minus provident, quis, quos tempore veniam! Amet aut debitis numquam placeat temporibus! Debitis
            veritatis, voluptas.
        </div>
        <div>Atque consectetur cupiditate deserunt eligendi esse eveniet fugit iste, iure iusto laudantium, molestias
            nisi non nulla numquam officiis perspiciatis provident quod quos rem repellat repudiandae sunt suscipit unde
            ut vel?
        </div>
        <div>Explicabo minima quos recusandae vitae. Ab adipisci amet aperiam deleniti dolorem dolorum eius eligendi
            esse, facere id magnam non nostrum quos recusandae rem sit tempore? Cum error ex maiores nostrum?
        </div>
        <div>A alias atque delectus eos esse, ex fuga magnam maiores minima nam non obcaecati praesentium quam quis
            similique soluta suscipit! Aliquid, excepturi explicabo fugiat in mollitia quibusdam quod similique sunt.
        </div>
        <div>Ab autem beatae consectetur earum eveniet excepturi expedita explicabo id inventore ipsum iste laudantium
            maxime minus molestiae nemo numquam, officiis qui quidem quisquam repudiandae sunt temporibus totam unde
            voluptas voluptate!
        </div>
        <div>Atque dolorem doloribus error hic impedit, laudantium neque omnis porro sed vitae? Alias aperiam est illo
            iusto mollitia quos repellat sint velit? Eius eveniet fugit labore magni maiores numquam, sunt.
        </div>
        <div>Consequatur ex expedita ipsa iusto saepe voluptatum. Aliquam animi eveniet illum iste neque nobis nostrum,
            odio voluptatem. Asperiores assumenda consequatur dolorem eos ipsum odio sapiente sunt tempore! Doloremque
            impedit, repudiandae.
        </div>
        <div>Aliquam at cumque ducimus eaque eligendi eos ex, exercitationem expedita fuga ipsa mollitia numquam
            officiis pariatur quas quia ratione recusandae voluptatum. Alias aliquid blanditiis dicta fuga laudantium
            saepe similique voluptates.
        </div>
        <div>Ad aspernatur, consequuntur dolore dolorum eaque est fugit illum molestiae nulla, quidem rerum
            voluptatibus? Aliquam atque cupiditate eveniet illum laudantium magnam necessitatibus porro sapiente
            temporibus veniam! Cupiditate eius quo ut?
        </div>
        <div>At enim esse eveniet, fuga, fugit laudantium molestiae omnis quas quo quod sequi suscipit vitae voluptatem.
            Dignissimos explicabo iure odit tempora. Accusantium blanditiis consectetur harum modi nostrum officia quam?
            Distinctio.
        </div>
        <div>Aliquid architecto aspernatur deleniti error esse, id in ipsum, nisi nobis pariatur quasi quia quod
            reprehenderit, saepe sed vel veritatis. Eaque fugiat nobis obcaecati voluptatem. Minima odio quae quidem ut.
        </div>
        <div>Accusamus ad architecto asperiores assumenda cumque distinctio expedita fugit impedit incidunt ipsa
            laboriosam libero maxime nesciunt numquam officiis placeat praesentium quidem quo quos, repellat saepe sequi
            similique suscipit ullam veniam!
        </div>
        <div>Commodi deleniti impedit inventore iure numquam, quod repudiandae rerum vero vitae voluptatibus?
            Accusantium aperiam commodi consequatur delectus dignissimos dolor, exercitationem iure laboriosam, maiores
            obcaecati qui sed similique temporibus ut voluptate.
        </div>
        <div>Aut debitis maxime non sapiente sed, veritatis voluptatum? Blanditiis deleniti ex placeat, praesentium unde
            vel! Amet, ducimus enim fugiat illo inventore magni, mollitia optio perspiciatis ratione temporibus, totam
            veritatis voluptate!
        </div>
        <div>A aliquam architecto consequatur dolorem doloribus eligendi esse et ipsam, laborum modi molestiae molestias
            numquam officiis quis repellat reprehenderit sint voluptates? Deleniti distinctio in inventore minima
            officia quaerat quam temporibus?
        </div>
        <div>Architecto assumenda atque consequatur consequuntur deleniti ducimus eius est hic id, ipsum laborum nemo
            nihil odio quae reiciendis soluta totam ullam velit! Amet autem dolorem est nostrum officia suscipit,
            tenetur?
        </div>
        <div>Dolorum earum enim est explicabo illo iusto necessitatibus neque numquam, quaerat quam qui, repellat
            tenetur? Blanditiis cupiditate ipsa perferendis quibusdam sequi tempore voluptatem. Alias architecto
            cupiditate explicabo quis ratione. Eaque?
        </div>
        <div>Dignissimos eius eveniet laudantium libero sed veniam voluptas. Accusamus accusantium aut consectetur ex,
            in magni modi qui quia sequi, tempore totam, veritatis voluptates voluptatibus. Id iste laudantium
            reiciendis sed velit!
        </div>
        <div>Ad distinctio dolor eius fugiat ipsum iste itaque magni, maxime? Eligendi esse eveniet facere facilis minus
            possimus quidem reprehenderit rerum veniam vitae. Animi eaque impedit officiis repudiandae voluptatum!
            Sapiente, tempora?
        </div>
        <div>At cumque deserunt dignissimos distinctio dolore doloribus enim esse excepturi exercitationem fugit in,
            labore minus modi molestias natus necessitatibus nesciunt non perferendis quam, quis repellendus sed totam
            unde velit vero.
        </div>
        <div>Dolor facere saepe sed voluptas. Amet, aspernatur dignissimos dolor laboriosam minima nam nobis omnis qui
            repudiandae tempora. Adipisci aliquam amet asperiores aspernatur dolore enim eos eum facere laborum
            similique, sunt.
        </div>
        <div>Accusantium aliquam, dolorum ea eligendi fuga minima nobis non pariatur praesentium quam quo sequi tempore
            tenetur voluptates voluptatum. Cupiditate deserunt doloremque eos et ex excepturi nesciunt nulla sed sit,
            velit!
        </div>
        <div>Architecto aspernatur deserunt nemo nihil sed. Accusamus animi aperiam distinctio earum, eos expedita illo
            illum laboriosam nihil odit officiis recusandae repudiandae sint sit sunt tempore velit veniam vitae
            voluptates voluptatum?
        </div>
        <div>Ad consequatur debitis dolore excepturi iusto, magni nobis nostrum placeat possimus quam quo saepe sapiente
            sed, tempore voluptas! Animi consequatur cumque explicabo facilis fuga laudantium magni modi provident quam
            soluta.
        </div>
        <div>Adipisci consequatur dolor, in optio rem reprehenderit suscipit. Alias assumenda, culpa cumque distinctio
            ea excepturi explicabo laudantium magnam natus nostrum quae qui repellat sequi, tempora temporibus, ullam
            voluptas voluptate voluptatibus.
        </div>
        <div>Amet autem, cumque eaque eligendi eveniet perferendis reprehenderit tempora. Ab aliquid amet, assumenda
            autem beatae commodi consequatur cum dolore eius eveniet ex iure laudantium nesciunt numquam quae reiciendis
            sequi vero.
        </div>
        <div>Commodi dignissimos ea eaque incidunt iusto minima odit officia perspiciatis possimus quidem quo
            repellendus, sequi voluptatibus. Adipisci aliquam asperiores atque aut, maxime natus nobis possimus rem sed
            suscipit veniam, vero?
        </div>
        <div>Adipisci aliquam amet aperiam autem blanditiis consequuntur cumque cupiditate eaque eum facilis ipsa libero
            maxime modi neque nobis, omnis possimus quasi sequi ullam vero? Adipisci consequatur deserunt fugiat minus
            mollitia?
        </div>
        <div>Assumenda dolorum et explicabo modi perspiciatis reprehenderit ullam voluptates! Aut consectetur
            consequuntur corporis eligendi esse, excepturi, fuga fugit nemo nulla numquam odit perspiciatis quas quos
            recusandae repellat saepe soluta vero?
        </div>
        <div>Eius molestias odit quam quisquam sunt? Error est ipsum nesciunt veritatis. Asperiores dolor, eaque eveniet
            id inventore iure nihil nisi placeat, qui reprehenderit saepe tempore! Facilis natus nesciunt officia
            quaerat!
        </div>
        <div>A, accusamus asperiores consequuntur error facilis minus, odio recusandae repudiandae rerum velit vero
            voluptates? Alias aperiam earum, eius error et illum itaque iure laboriosam nemo odio praesentium rem sed
            temporibus.
        </div>
        <div>Ad at consectetur deserunt dignissimos ducimus eaque id illum incidunt ipsum iste itaque laboriosam
            obcaecati omnis, quos ratione repellendus rerum sunt ullam ut veniam? At deleniti molestiae nesciunt
            voluptatem voluptates.
        </div>
        <div>Animi aspernatur corporis deserunt dignissimos in ipsa laborum laudantium quidem saepe tempora? Ab adipisci
            amet aspernatur culpa dolore dolorem eaque excepturi expedita inventore neque. Blanditiis dolore
            perspiciatis praesentium soluta voluptatibus!
        </div>
        <div>Architecto autem debitis iusto, maxime nesciunt non obcaecati perferendis porro quia quo ratione sapiente
            vel, vitae. Consectetur, magnam, ut! Accusantium molestiae reiciendis vero? Eveniet iste laboriosam laborum
            rerum sint, tenetur.
        </div>
        <div>Amet autem cumque ea fugiat in ipsum libero modi molestias nemo obcaecati omnis optio perspiciatis placeat
            quam, quod, saepe similique. Doloribus eum excepturi harum incidunt iusto repellendus reprehenderit vero
            voluptate!
        </div>
        <div>Ad et iure molestiae quidem quo temporibus totam ullam voluptates. A, ab, eius eveniet inventore iste
            laudantium modi natus quam, quis sint tenetur velit voluptatem! Aperiam iste praesentium provident
            reprehenderit!
        </div>
        <div>Animi, corporis delectus dolore dolorem excepturi exercitationem id ipsam labore libero magnam nihil
            numquam officia perferendis quam, quia quos rerum sit temporibus. Consequatur corporis dolore explicabo illo
            laudantium qui rem!
        </div>
        <div>A aliquam amet animi aperiam beatae cum cupiditate dolore dolorem earum, eligendi enim eveniet facilis fuga
            ipsum labore magni maxime nostrum quasi quisquam suscipit. Ipsa iure magnam nostrum repudiandae veniam.
        </div>
        <div>Accusantium debitis earum eum laboriosam optio reiciendis temporibus voluptatum. Adipisci commodi corporis
            culpa cum eos error est, expedita officia provident quae, quasi quia quo ratione reiciendis repudiandae
            rerum vel voluptate!
        </div>
        <div>A accusamus adipisci autem illum impedit ipsa iste iure laudantium, nisi odit pariatur recusandae soluta
            tempora. Aspernatur cupiditate pariatur quod! Alias aperiam assumenda fuga, laborum magnam quam quod veniam
            vero.
        </div>
        <div>Aspernatur atque dolore eius, exercitationem facere illo impedit iure libero molestiae nobis provident
            repudiandae saepe soluta. Architecto consequatur eveniet excepturi mollitia nostrum repudiandae vel veniam.
            Aliquam aliquid dolores nam rerum.
        </div>
        <div>Cum facilis iusto magnam quos repudiandae! Adipisci animi commodi consequatur consequuntur dolorem dolores
            earum eius ex, hic impedit, labore magnam, modi nostrum numquam quae quas quidem quo rem tempore tenetur.
        </div>
        <div>A ab accusamus ad alias architecto blanditiis consectetur corporis debitis deleniti dignissimos ea eligendi
            enim eveniet, excepturi fugiat illo impedit ipsa molestiae odio ratione repellat rerum temporibus. Deserunt
            eos, pariatur?
        </div>
        <div>Consequatur, deleniti deserunt dolores ea et iure modi numquam. Accusantium adipisci architecto asperiores
            consectetur consequuntur distinctio earum, odio, possimus quaerat quo rem sunt veniam voluptates!
            Consequatur excepturi nostrum omnis voluptates.
        </div>
        <div>Aliquam consectetur dolor dolorem enim nihil qui quod repellendus ut? At eaque exercitationem in nulla
            quia! Beatae commodi consequuntur debitis distinctio explicabo illum, libero provident quaerat quis rem vero
            voluptatem.
        </div>

    </div>

</body>
</html>